<template>
    <div>
        <el-select v-bind="$attrs" filterable remote :remote-method="remoteMethod" :loading="loading"
            remote-show-suffix>
            <el-option v-for="item in options" :key="item.id" :label="item.unityName" :value="item.id" />
        </el-select>
    </div>
</template>
<script setup>
// import { getSupervisionSelectList } from '@/api/manage/resource-management/serial-number-management/index';
import { getUnitList } from '@/api/manage/units-manager/units-manager/index';
import { UNIT_TYPE_Map } from '@/constant/index'
const options = ref([])
const list = ref([])
getUnitList({ unityType: UNIT_TYPE_Map.monitor }).then(res => {
    list.value = res.result
    options.value = list.value
})
const loading = ref(false)
const remoteMethod = (query) => {
    if (query) {
        loading.value = true
        setTimeout(() => {
            loading.value = false
            options.value = list.value.filter((item) => {
                return item.unityName.includes(query)
            })
        }, 200)
    } else {
        options.value = list.value
    }
}
</script>
<style lang="scss" scoped></style>